<template>
	<view>
		<PageHead backPath="/pages/user/index?p=3"></PageHead>
		<view class="pl-30 pr-30 mt-20">
			<u-form :model="formData" class="mb-15">
				<u-form-item @click="showTypeSelect">
					<u--input
						disabled
						disabledColor="#ffffff"
						placeholder="请选择类别"
						class="feedback-input"
						v-model="formData.type"
					></u--input>
					<u-icon slot="right" name="arrow-right" color="#fff"></u-icon>
				</u-form-item>
				<u-form-item>
					<u--textarea v-model="formData.content" style="min-height: 120px;" autoHeight confirmType="done" maxlength="255" count placeholder="请输入内容" ></u--textarea>
				</u-form-item>
			</u-form>
			<Acard pad="12px" width="200px" @click.native="sendFeedback">
				<view class="fs-center">发送反馈</view>
			</Acard>
			
			<u-action-sheet
				:show="showType"
				:actions="actions"
				title="请选择反馈类别"
				style="color: #000;"
				@close="showType = false"
				@select="typeSelect"
			></u-action-sheet>
		</view>
		<ParticleBackground></ParticleBackground>
	</view>
</template>

<script>
import {mapState} from 'vuex';
export default {
	name: 'feedback',
	data() {
		return {
			formData:{
				type:'',
				content:'',
			},
			showType:false,
			actions:[{name:'意见反馈'},{name:'bug反馈'}]
		};
	},
	methods:{
		typeSelect(e){
			this.formData.type = e.name
		},
		showTypeSelect(){
			this.showType = true;
			uni.hideKeyboard();
		},
		async sendFeedback(){
			let {type,content} = this.formData;
			if(!type){
				uni.showToast({
					title:"还没有选择反馈类型",
					icon:'error',
					duration:2000
				})
				return
			}
			if(content){
				let result = await uni.$u.http.post('/feedback/add',{
					type,content,user_id:this.userinfo.id,feedback_time:Date.now(),society_id:this.userinfo.society_id
				});
				if(result.data.code === 200){
					uni.showToast({
						title:"成功",
						icon:'success',
						duration:2000
					})
					this.formData.content = ''
				}
			}else{
				uni.showToast({
					title:"还没有输入任何反馈",
					icon:'error',
					duration:2000
				})
			}
		}
	},
	computed:{
		...mapState('user',['userinfo'])
	}
};
</script>

<style scoped lang="scss">
.feedback-input {
	height: 45px;
	background-color: #fff;
}
</style>
